====== jwHelloWorld Plugin ======

---- plugin ----
description : A simple Jokuwiki plugin using javascript and CSS only
author      : SyMcBean
email       : colin.mckinnon@gmail.com
type        : syntax
lastupdate  : 2016-07-06
compatible  : Adora Belle, Weatherwax
depends     : Jokuwiki
conflicts   : 
similar     : 
tags        : javascript, jquery, style, Jokuwiki

downloadurl : https://github.com/symcbean/jwHelloWorld/archive/master.zip
bugtracker  : https://github.com/symcbean/jwHelloWorld/issues
sourcerepo  : https://github.com/symcbean/jwHelloWorld
----

===== Description =====

jwHelloWorld creates a speech bubble using the supplied arguments. It is primarily intended as a demonstration of a javascript-only Jokuwiki plugin but a slightly amended version is used on dokuwiki sites I have developed.

===== Syntax and Usage =====

The syntax for the data is formally described in the schema.json file included in the plugin.

The data can have one or 2 parameters. The 'say' parameter is required. The 'speaker' parameter is optional, e.g.

<code>
<jw name='jwHelloWorld' 
  data='{ "say" : "Hello World", "speaker" : "Jokuwiki"}'
  ></jw>
</code>

===== Source code =====

<code javascript script.js>
function jwSpeakRight(jw)
{
    var el=document.getElementById(jw.id);
    if (el) {
        var speaker=jw.speaker ? jw.speaker: 'jokuwiki';
        var c='\n<blockquote class="speak-right">';
           c+='\n<p>' + jw.say + '</p>\n</blockquote>';
           c+='\n<p class="speak-right-speaker">' + speaker + '</p>';
           el.innerHTML+=c;
           return true;
    }
    return false;
}
if (jokuwiki) {
    jokuwiki.register('jwHelloWorld', jwSpeakRight);
}
</code>

<code javascript schema.json>
{
    "type":"object",
    "$schema": "http://json-schema.org/draft-04/schema#",
    "id": "http://www.dokuwiki.org/plugin:jwHelloWorld/schema.json",
    "required":false,
    "properties":{
        "speaker": {
            "type":"string",
            "description": "Appears below the speak bubble",
            "id": "http://www.dokuwiki.org/plugin:jwHelloWorld/helloFrom",
            "required":false
        },
        "say": {
            "type":"string",
            "description": "Text to go inside the speak bubble",
            "id": "http://www.dokuwiki.org/plugin:jwHelloWorld/helloTo",
            "required":true
        }
    }
}
</code>

<code css style.css>
/* Note that the contianing div class uses the jokuwiki name */
div.dokuwiki .jwHelloWorld {
       float:right; min-width: 20%; max-width: 30%; padding: 0.6em;
}
/* the rest is just styling sugar */
div.dokuwiki .speak-right {
        position:relative;
        padding:15px 30px 15px 30px;
        margin:0.5em;
        color:#000;
        font-weight: bold;
        font-size: 120%;
        background: #d1b000;
        /* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
        -webkit-border-top-left-radius:25px 50px;
        -webkit-border-top-right-radius:25px 50px;
        -webkit-border-bottom-right-radius:25px 50px;
        -webkit-border-bottom-left-radius:25px 50px;
        -moz-border-radius:25px / 50px;
        border-radius:25px / 50px;
}
div.dokuiwki .speak-right-p {
        display: block;
        margin:10px 0.5em 2em 80px;
        text-align:left;
        font-style:italic;
        font-weight: bold;
        font-size: 120%
}
div.dokuwiki .speak-right:before {
        content:"";
        position:absolute;
        bottom:-30px;
        left:40px;
        /* */
        border-width:0 50px 30px 0;
        border-style:solid;
        border-color:transparent #d1b000;
        /* reduce the damage in FF3.0 */
        display:block;
        width:0;
}
div.dokuwiki .speak-right:after {
        content:"";
        position:absolute;
        bottom:-30px;
        left:70px;
        border-width:0 20px 30px 0;
        border-style:solid;
        border-color:transparent #fff;
        /* reduce the damage in FF3.0 */
        display:block;
        width:0;
}
div.dokuwiki .speak-right-speaker {
    margin:20px 0.5em 2em 110px; text-align:left; font-style:italic; font-size:120%;
}
</code>